<!--  -->
<template>
  <div class="container">
    <div class="version-switcher">
      <el-select v-model="selectedVersion" placeholder="选择版本">
        <el-option label="版本1" value="v1"></el-option>
        <el-option label="版本2" value="v2"></el-option>
        <el-option label="版本3" value="v3"></el-option>
      </el-select>
    </div>
    <div class="search-container">
      <el-input v-model="searchKey" placeholder="输入搜索内容" class="search-input"></el-input>
      <el-button type="primary" @click="handleSearch" class="search-btn">搜索</el-button>
    </div>
    <el-list v-model="resultList" class="result-list">
      <template #default="{ item }">
        <el-list-item>
          {{ item }}66
        </el-list-item>
      </template>
    </el-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKey: '',
      selectedVersion: '',
      resultList: []
    };
  },
  components: {},

  computed: {},

  mounted() {
    this.resultList = ['初始展示数据1', '初始展示数据2', '初始展示数据3'];
  },

  methods: {
  handleSearch() {
    // 模拟搜索结果，实际可能需要调用API
    this.resultList = [`搜索结果1：${this.searchKey}`, `搜索结果2：${this.searchKey}`, `搜索结果3：${this.searchKey}`];
  }
},
};
</script>
<style lang='scss' scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 20px;
  position: relative;
}

.version-switcher {
  position: absolute;
  top: 20px;
  right: 80px;
  width: 120px
}

.search-container {
  display: flex;
  gap: 0;
  margin: 40px auto 20px; /* 顶部40px距离，水平居中 */
  max-width: 400px; /* 减小最大宽度 */
      width: 80%; /* 确保不靠边 */
}

.search-input {
  flex: 1;
  // height: 50px; /* 增加输入框高度 */
  background: rgba(255, 255, 255, 0.5); /* 确保 el-input 半透明背景 */
  border: 1px solid rgba(255, 255, 255, 0.5); /* 确保 el-input 半透明边框 */
  background: rgba(255, 255, 255, 0.5); /* 确保半透明背景 */
  border: 1px solid rgba(255, 255, 255, 0.5); /* 确保半透明边框 */
  background: rgba(255, 255, 255, 0.5); /* 调整为更高透明度 */
  border-radius: 8px 0 0 8px; /* 左侧圆角 */
  border: 1px solid rgba(255, 255, 255, 0.5); /* 调整为更高透明度边框 */
  border-right: none; /* 右侧无边框与按钮衔接 */
}

.search-btn {
  width: 80px;
  border-radius: 0 8px 8px 0; /* 右两侧圆角与输入框衔接 */
}

.result-list {
  width: 100%;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}
</style>